<template>
	<div>
		<warning-bar title="注：右上角角像下拉可切换角色"/>
		<!-- 一个分页 -->
		<div class="gva-table-box">
			<div class="gva-btn-list">
				<el-button size="mini" type="primary" icon="plus" @click="addUser">新增用户</el-button>
			</div>

			<el-table :data="tableData">
				<!-- 头像 -->
				<el-table-column align="left" label="头像" min-width="50">
					<template #default="scope">
						<CustonPic style="margin-top:8px" :pic-src="scope.row.headerImg"/>
					</template>
				</el-table-column>
				<!-- id -->
				<el-table-column align="left" label="UUID" min-width="250" prop="uuid"/>
				<!-- 用户名 -->
				<el-table-column align="left" label="用户名" min-width="150" prop="userName" />
				<!-- 昵称 -->
				<el-table-column align="left" label="昵称" min-width="100" prop="nickName">
					<template #default="scope">
						<p v-if="!scope.row.editFlag" class="nickName">
							{{ scope.row.nickName }}
							<el-icon
								class="pointer"
								color="#66b1ff"
								@click="openEdit(scope.row)"
							>
								<edit />
							</el-icon>
						</p>
						<p v-if="scope.row.editFlag" class="nickName"> 
							<el-input v-model="scope.row.nickName"/>
							<el-icon 
								class="pointer" 
								color="#67c23a" 
								@click="enterEdit(scope.row)"
								>
								<check />
							</el-icon>
							<el-icon
								class="pointer"
								color="#f23c3c"
								@click="closeEdit(scope.row)">
								<close />
							</el-icon>
						</p>
					</template>
				</el-table-column>
				<!-- 用户角色 -->
				<el-table-column align="left" label="用户角色" min-width="150">
					<template # ="scope">
						<el-cascader 
							v-model="scope.row.authorityIds"
							:options="authOptions"
							:show-all-levels="false"
							collapse-tages
							:props="{
								multiple:true,
								checkStrictly:true,
								label:'authorityName',
								value:'authorityId',
								disabled:'disabled',
								emitPath:false
							}"
							:clearable="false"
							@visible-change="(flag)=>{changeAuthority(scope.row,flag)}"
							@remove-tag="()=>{changeAuthority(scope.row,false)}"
						/>
					</template>
				</el-table-column>
				<!-- 操作 -->
				<el-table-column align="left" label="操作" min-width="150">
					<template #default="scope">
						<el-popover
							v-model:visible="scope.row.visible" 
							placement="top" 
							width="160">
							<p>缺点要删除此用户吗</p>
							<div style="text-align:right;margin-top:8px">
								<el-botton size="mini" type="text" @click="scope.row.visible=false">取消</el-botton>
								<el-botton type="primary" size="mini" @click="deleteUserFunc(scope.row)">确定</el-botton>
							</div>
							<template #reference>
								<el-button type="text" icon="delete" size="mini">删除</el-button>
							</template>
						</el-popover>
						<el-button type="text" icon="magic-stick" size="mini" @click="resetPasswordFunc(scope.row)">重置密码</el-button>
					</template>
				</el-table-column>
			</el-table>
			<!-- 分页 -->
			<div class="gva-pagination">
				<el-pagination
					:current-page="page"
					:page-size="pageSize"
					:page-sizes="[10,30,50,100]"
					:total="total"
					layout="total,sizes,prev,pager,next,jumper"
					@current-change="handleCurrentChange"
					@size-change="handleSizeChange"
				/>
			</div>
		</div>
		<!-- 点击新建弹出框 -->
		<el-dialog v-model="addUserDialog" custom-class="user-dialog" title="新增用户">
			<el-form ref="userForm" :rules="rules" :model="userInfo" label-width="80px">
				<el-form-item label="用户名" prop="username">
					<el-input v-model="userInfo.username"/>
				</el-form-item>
				<el-form-item label="密码" prop="password">
					<el-input v-model="userInfo.password"/>
				</el-form-item>
				<el-form-item label="别名" prop="nickName">
					<el-input v-model="userInfo.nickName"/>
				</el-form-item>
				<el-form-item label="用户角色" prop="authorityId">
					<el-cascader
						v-model="userInfo.authorityIds"
						style="width:100%"
						:options="authOptions"
						:show-all-levels="false"
						:props="{
							multiple:true,
							checkStrictly:true,
							label:'authorityName',
							value:'authorityId',
							disabled:'disabled',
							emitPath:false
						}"
						:clearable="false"
					/>
				</el-form-item>
				<el-form-item label="头像" label-width="80px">
					<div style="display:inline-block">
						<img 
							class="header-img-box"
							src="@/assets/logo.png"
						/>
					</div>
				</el-form-item>
			</el-form>
			<template #footer>
				<div class="dialog-footer">
					<el-button size="small" type="primary" @click="enterAddUserDialog">确定</el-button>
					<el-button size="small" @click="closeAddUserDialog">取消</el-button>
				</div>
			</template>
		</el-dialog>
		<!-- <ChooseImg ref="chooseImg" :target="userInfo" :target-key="`headerImg`"/> -->
	</div>
</template>

<script>
	export default{
		name:'User',
	}
</script>

<script setup>
import{
	getUserList,
	setUserAuthorities,
	register,
	deleteUser
} from '@/api/user'
import { getAuthorityList } from '@/api/authority'
import CustonPic from '@/components/customPic/index.vue'
import ChooseImg from '@/components/chooseImg/index.vue'
import warningBar from '@/components/warningBar/warningBar.vue'
import { setUserInfo,resetPassword } from '@/api/user.js'
import { nextTick,ref,watch } from 'vue'
import { ElMessage,ElMessageBox } from 'element-plus'

const path=ref(import.meta.env.VITE_BASE_API)

//初始化
//拿到用户角色信息，用option存起来
const setAuthorityOptions=(AuthorityData,optionsData)=>{
	AuthorityData && AuthorityData.forEach(item=>{
		if(item.children && item.children.length){
			const option={
				authorityId:item.authorityId,
				authorityName:item.authorityName,
				children:[]
			}
			setAuthorityOptions(item.children,option.children)
			optionsData.push(option)
		}else{
			const option={
				authorityId:item.authorityId,
				authorityName:item.authorityName
			}
			optionsData.push(option)
		}
	})
}

const page = ref(1)
const total = ref(0)
const pageSize = ref(10)
const tableData = ref([])

//分页
const handleSizeChange = (val) =>{
	pageSize.value=val
	getTableData()
}

const handleCurrentChange = (val) =>{
	page.value=val
	getTableData()
}

//查询
const getTableData = async() =>{
	const table=await getUserList({page:page.value,pageSize:pageSize.value})
	if(table.code===0){
		tableData.value=table.data.list
		total.value=table.data.total
		page.value=table.data.page
		pageSize.value=table.data.pageSize
	}
}
const initPage = async() =>{
	getTableData()
	const res=await getAuthorityList({page:1,pageSize:999})
	setOptions(res.data.list)
}

initPage()

watch(tableData,()=>{
	setAuthorityIds()
})

const setAuthorityIds=()=>{
	tableData.value && tableData.value.forEach((user)=>{
		const authorityIds=user.authorities && user.authorities.map(i=>{
			return i.authorityId
		})
	})
}

const authOptions=ref([])
const setOptions=(authData)=>{
	authOptions.value=[]
	setAuthorityOptions(authData,authOptions.value)
}

const resetPasswordFunc=(row)=>{
	ElMessageBox.confirm(
		'是否将此用户密码重置为123456？',
		'警告',
		{
			confirmButtonText:'确定',
			cancelButtonText:'取消',
			type:'warning',
		}
	).then(async()=>{
		const res=await resetPassword({ID:row.ID})
		if(res.code===0){
			ElMessage({
				type:'success',
				message:res.msg,
			})
		}else{
			ElMessage({
				type:'error',
				message:res.msg,
			})
		}
	})
}

// const chooseImg=ref(null)
// const openHeaderChange=()=>{
// 	chooseImg.value.open()
// }

//设置名称
const backNickName=ref('')
const openEdit=(row)=>{
	if(tableData.value.some(item=>item.editFlag)){
		ElMessage('当前存在正在编辑的用户')
		return
	}
	backNickName.value=row.nickName
	row.editFlag=true
}
const enterEdit=async(row)=>{
	const res = await setUserInfo({nickName:row.nickName,ID:row.ID})
	if(res.code===0){
		ElMessage({
			type:'success',
			message:'设置成功'
		})
	}
	backNickName.value=ref('')
	row.editFlag=false
}
const closeEdit=(row)=>{
	row.nickName=backNickName.value
	backNickName.value=''
	row.editFlag=false
}

//删除用户
const deleteUserFunc=async(row)=>{
	const res=await deleteUser({id:row.ID})
	if(res.code===0){
		ElMessage.success('删除成功')
		await getTableData()
		row.visible=false
	}
}

//新建弹窗相关
const userInfo=ref({
	username:'',
	password:'',
	nickname:'',
	headerImg:'',
	authorityId:'',
	authorityIds:[]
})

const rules=ref({
	username:[
		{required:true,message:'请输入用户名',trigger:'blur'},
		{min:5,message:'最低5位字符',trigger:'blur'}
	],
	password:[
		{required:true,message:'请输入用户密码',trigger:'blur'},
		{min:6,message:'最低6位字符',trigger:'blur'}
	],
	nickName:[
		{required:true,message:'请输入用户昵称',trigger:'blur'}
	],
	authorityId:[
		{required:true,message:'请选择用户角色',trigger:'blur'}
	]
})

//提交表单
const userForm=ref(null)
const enterAddUserDialog=async()=>{
	userInfo.value.authorityId=userInfo.value.authorityIds[0]
	userForm.value.validate(async(valid) =>{
		if(valid){
			const res=await register(userInfo.value)
			if(res.code===0){
				ElMessage({
					type:'success',
					message:'创建成功'
				})
			}
		await getTableData()
		closeAddUserDialog()
		}
	})
}

const addUserDialog=ref(false)
const closeAddUserDialog=()=>{
	userForm.value.resetFields()
	userInfo.value.headerImg=''
	userInfo.value.authorityIds=[]
	addUserDialog.value=false
}
const addUser=()=>{
	addUserDialog.value=true
}

const changeAuthority=async(row,flag)=>{
	if(flag){
		return
	}
	await nextTick()
	const res=await setUserAuthorities({
		ID:row.ID,
		authorityIds:row.authorityIds
	})
	if(res.code===0){
		ElMessage({
			type:'success',
			message:'角色设置成功'
		})
	}
}
</script>


<style lang="scss">
.user-dialog{
	.header-img-box{
		width:200px;
		height:200px;
		border:1px dashed #ccc;
		border-radius:20px;
		text-align:center;
		line-height:200px;
		cursor:pointer;
	}

  .avatar-uploader .el-upload:hover {
    border-color: #409eff;
  }
  .avatar-uploader-icon {
    border: 1px dashed #d9d9d9 !important;
    border-radius: 6px;
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
}
.nickName{
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.pointer{
  cursor: pointer;
  font-size: 16px;
  margin-left: 2px;
}
</style>